iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

30天CSS、JS、React打造專案零組件系列 第 15

DAY15 - [JS] 倒數計時

  • 分享至 

  • xImage
  •  

今日文章目錄

  • 需求說明
  • 事前準備
  • 重點說明
  • 參考資料

需求說明

  • 輸入框:使用者可以輸入時間
  • 顯示:依據輸入時間進行倒數
  • 提示視窗:顯示預計結束時間

事前準備

  • HTML 結構:
<section class="timer">
  <div class="countdownClock">
    <div class="form">
      <input type="number" placeholder="請輸入秒數" id="timerInput">
      <button class="addBtn">+</button>
    </div>
    <h1 class="countdownTitle">Counter</h1>
    <p class="comeBackTimeStemp">
        <!--    顯示預計回來的時間    -->
    </p>
  </div>
</section>

重點說明

  • Date.now() : 回傳 距 1970/01/01 00:00:00 UTC 至今的毫秒數(數字型別)。

  • setInterval(func, delayTime, argument)

    • 用途:每間隔多少毫秒,執行動作。
    • 回傳:timeoutID,紀錄當下定時編號,作為之後取消執行的依據。
    • 參數:
      • func:間隔delayTime,要執行哪些動作
      • delayTime : 延遲單位(毫秒)
      • argument(optional): 其他參數
    • setTimeout()差異:
      setTimeout()做完一次延遲執行動作即結束,setInterval()則是間隔延遲執行動作不中斷。
  • clearInterval(timeoutID):

    • 用途:利用timeoutID中斷setInterval()
  • Math.round(value) : 回傳 四捨五入後的相近整數值。

        // 正數
        const num1 = 13.56;
        console.log(Math.round(num1)); // 14
    
        // 負數
        const num2 = -34.23;
        console.log(Math.round(num2)); // -34
    
  • Math.floor(value) : 回傳 小於等於所給數字的最大整數。

        // 正數
        const num1 = 13.56;
        console.log(Math.floor(num1)); // 13
    
        // 負數
        const num2 = -34.23;
        console.log(Math.floor(num2)); // -35
    
  • codepen 練習:https://codepen.io/chen-chens/pen/ZEyaBGB?editors=0010

  • 顯示效果:
    顯示效果


參考資料



上一篇
DAY14 - [JS] 擴充toDoList功能 : 新增 category
下一篇
DAY16 - [JS] 擴充功能 - 倒數計時,暫停、開始、結束
系列文
30天CSS、JS、React打造專案零組件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言